<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .gray {
            -webkit-filter: grayscale(1); /* Webkit */
            filter: gray; /* IE6-9 */
            filter: grayscale(1); /* W3C */
        }
    </style>
</head>
<body>
<h1>jQuery鼠标事件</h1>
<hr>
<div>
    <div>
        <input type="text" id="username" value="zhangsan"/><span id="errorMsg"></span>
    </div>
    <div>
        <img src="https://img.simoniu.com/power_off.jpg" id="power" style="cursor: pointer"/>
    </div>
    <div>
        <img src="https://img.simoniu.com/beatiful_girl01.jpg" id="girl" style="cursor: pointer"/>
    </div>
</div>

<script>
    let flag = false;
    $(function () {
        $("#username").blur(function () {
            if (this.value.length <= 0) {
                $("#errorMsg").text('用户名不能为空！').css("color", "red");
            } else {
                $("#errorMsg").text('')
            }
        })

        $("#power").dblclick(function () {
            flag = !flag;
            if (flag) {
                $("#power").attr("src", "https://img.simoniu.com/power_on.jpg");
            } else {
                $("#power").attr("src", "https://img.simoniu.com/power_off.jpg");
            }
        })

        $("#girl").mouseover(function () {
            console.log('mouseover');
            $("#girl").addClass("gray");
        })
        $("#girl").mouseleave(function () {
            console.log('mouseleave');
            $("#girl").removeClass("gray");
        })
    })
</script>

</body>
</html>
